<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="uni-title">日期：{{province}}{{city}}{{area}}</view>
		</view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view class="picker-closed row">
				    <text class="float-li" @click='pikerCancel'>取消</text>
				    <text class="float-li-rig" style='color: green' @click='pikerConfirm'>确认</text>
				    </view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>			 
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		 components: {
		        uniPopup
		    },
		data() {
			return {
				province:"",
				city:"",
				area:"",
				rowData:[],
				provinceList:[],
				cityList:[],
				areaList:[],
				value: [0,0,0],
				visible: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			};
		},
		onLoad() {
		comm.request("POST", "/public/cityList", {}, (res, data) => {
			console.log("省市区数据", res)
			if (res.data.ret_code == 200) {
				this.rowData = data
				this.provinceList= data
				this.cityList = data[0].children
				this.areaList = data[0].children[0].children
				console.log(this.areaList,"areaList=====")
			} 
		})
		},
		methods: {
			open(){
				this.$refs.popup.open()
				this.visible = true
			},
			bindChange: function(e) {
				console.log(e)
				const val = e.detail.value
				this.cityList = this.rowData[val[0]].children
				this.areaList = this.rowData[val[0]].children[val[1]].children
				this.value = val
			},
				
			pikerConfirm(){
				this.$refs.popup.close()
				this.province = this.rowData[this.value[0]].name
				this.city = this.rowData[this.value[0]].children[this.value[1]].name
				this.area = this.rowData[this.value[0]].children[this.value[1]].children[this.value[2]].name
				console.log(this.rowData[this.value[0]].id)
				console.log(this.rowData[this.value[0]].children[this.value[1]].id)
				console.log(this.rowData[this.value[0]].children[this.value[1]].children[this.value[2]].id)
			},
				
			pikerCancel(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less">

.box{
	height:500rpx;
	padding:30rpx 30rpx;
	background: #FFFFFF;
	.picker-closed{
		justify-content: space-between;
	}
}
picker-view{
	width: 100%;
	height:500rpx;
	
	picker-view-column{
		.item{
			line-height: 50px;
		}
	}
}
</style>
